<template>
	<el-container>
		<el-main v-loading="loading">
			<div class="contnet">
				<div class="goods sa-flex">
					<imgSwiper :list="state.detail.images" />
					<div class="goodsInfo sa-m-l-30 sa-flex-col sa-row-between">
						<div class="goodsInfo-top">
							<div class="top-titleBox">
								<div class="titleBox-supplier sa-m-r-35">
									{{ state.detail.supplier }}
								</div>
								<div class="titleBox-title sa-line-2">
									{{ state.detail.title }}
								</div>
							</div>
							<div class="top-subtitle sa-line-2">
								{{ state.detail.subtitle }}
							</div>
							<div class="infoBox">
								<div class="label">采购价</div>
								<div class="value" style="color:#FA5151">￥{{ calcPrice }}</div>
							</div>
							<div class="infoBox">
								<div class="label">服务履约</div>
								<div class="value">
									<div class="goodsInfo-tag ">
					<div class="tag-item" v-for="ser in  serviceList">
						{{ser.name}}</div>
			</div>
								</div>
							</div>
							<div class="infoBox">
								<div class="label">供货店铺</div>
								<div class="value">{{ state.detail.from }}</div>
							</div>
						</div>
						<div class="goodsInfo-bottom">
							<el-button class="goodsUp" color="#3768FA" type="primary"  :disabled="state.detail?.is_in == 1 " @click="addGoods">{{state.detail?.is_in==1 ? '已铺货':'一键铺货'}}</el-button>
							<el-button class="goodsCollect" v-if="state.detail.is_collect==1" type="danger"  @click="cancelCollect">取消收藏</el-button>
							<el-button class="goodsCollect" v-else   @click="collect">加入收藏</el-button>
						</div>
					</div>
				</div>
				<!-- 商品属性 -->
				<div class="attributes">
					<div class="attributes-title">商品属性</div>
					<div class="attributes-content sa-flex sa-flex-wrap">
						<div class="content-item sa-flex" v-for="item in attributes" :key="item.attributeID">
							<div class="item-title">{{item.attributeName}}</div>
							<div class="item-value">{{item.value}}</div>
						</div>
					</div>
				</div>
			</div>
		</el-main>
	</el-container>
</template>
<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { api } from './recommend.service';
import $store from '@/sheep/store';
import { ElMessageBox, ElMessage } from 'element-plus';

import imgSwiper from './components/swiper.vue';
const emit = defineEmits(['modalCallBack']);
const props = defineProps({
	modal: {
		type: Object,
	},
});
const loading = ref(true);
const state = reactive({
	imgIndex: 0,
	detail: {}
});
onMounted(() => {
	if (props.modal.params.id) {
		getData();
	}
});
const attributes = computed(() => {
	if (state.detail.attributes) {
		return JSON.parse(state.detail.attributes);
	} else {
		return [];
	}
});
const serviceList = computed(()=>{
	if(!state.detail.serviceList)return []
	return JSON.parse(state.detail.serviceList)
})
const calcPrice = computed(() => {
    if (state.detail.price) {
        return state.detail?.price.length > 1 ? state.detail?.price.join('~') : state.detail?.price[0]
    } else {
        return '--';
    }

})
async function collect(){
	let {data , error} = await api.collect.add({
		goods_id: state.detail.id,
		supplier_goods_id:state.detail.supplier_goods_id,
		supplier:state.detail.supplier
	})
	if(error == 0){
		ElMessage({
			type: 'success',
			message: '收藏成功',
		});
		getData()
	}
}
async function cancelCollect(){
	let {data , error,msg} = await api.collect.delete(state.detail.id)
	if(error == 0){
		ElMessage({
			type: 'success',
			message: msg,
		});
		getData()
	}
}

async function  addGoods(){
	const { store_id } =$store('account').info;
	if(!store_id && store_id != 0){
		ElMessage({
			type: 'warning',
			message: '账号下没有绑定店铺',
		});
		return;
	}
	let { data , error,msg} = await api.addGoods(store_id,state.detail.id)
	if (error === 0) {
		ElMessage({
			type: 'success',
			message: msg,
		});
		getData()
	} 

}
async function getData() {
	const { store_id } =$store('account').info;

	loading.value = true;
    const res = await api.shopSelectDetails(props.modal.params.id,store_id);
	loading.value = false;

    if (res.error == 0) {
        state.detail = res.data;
    }
}

</script>
<style lang="scss" scoped>

.goodsInfo-tag {
			display: flex;
			flex-wrap: wrap;
			// height: 24px;
			.tag-item {
				margin-bottom: 4px;
				margin-right: 4px;
				padding: 0 6px;
				height: 20px;
				border-radius: 4px;
				background: #F2F6FE;
				font-size: 14px;
				color: #3768FA;
			}
		}
.contnet {
	.goods {
		.goodsInfo {
			height: 420px;

			.goodsInfo-top {
				.top-subtitle{
					font-family: Source Han Sans;
						font-size: 18px;
						font-weight: bold;
						line-height: normal;
						letter-spacing: normal;
						color: #666;
				}
				.top-titleBox {
					display: flex;
					height: 60px;

					.titleBox-supplier {
						height: 24px;
						margin-top: 6px;
						border-radius: 4px;
						background: #3662EC;
						padding: 0 10px;
						min-width: 50px;
						font-family: Source Han Sans;
						font-size: 12px;
						font-weight: 500;
						line-height: 24px;
						text-align: center;
						letter-spacing: normal;
						color: #FFFFFF;
					}

					.titleBox-title {
						font-family: Source Han Sans;
						font-size: 24px;
						font-weight: bold;
						letter-spacing: normal;
						color: #202020;
					}
				}

				.infoBox {
					margin-top: 24px;
					display: flex;
				}

				.label {
					width: 120px;
					font-family: Source Han Sans;
					font-size: 18px;
					font-weight: 500;
					line-height: normal;
					letter-spacing: normal;
					color: #9E9E9E;
				}

				.value {
					font-family: Source Han Sans;
					font-size: 18px;
					font-weight: 500;
					line-height: normal;
					letter-spacing: normal;
					color: #202020;
				}
			}

			.goodsInfo-bottom {
				.goodsUp {
					border-radius: 10px;
					width: 189px;
					height: 54px;
					font-family: Source Han Sans;
					font-size: 24px;
					font-weight: normal;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #FFFFFF;
				}

				.goodsCollect {
					width: 189px;
					height: 54px;
					border-radius: 10px;
					font-family: Source Han Sans;
					font-size: 24px;
					font-weight: normal;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
				}
			}
		}
	}

	.attributes {
		.attributes-title {
			margin-top: 20px;
			padding: 10px 0;
			font-family: Source Han Sans;
			font-size: 20px;
			font-weight: 500;
			line-height: normal;
			letter-spacing: normal;
			color: #9E9E9E;
		}

		.attributes-content {
			.content-item {
				width: 50%;
				height: 40px;
				.item-title {
					width: 240px;
					font-family: Source Han Sans;
					font-size: 18px;
					font-weight: 500;
					line-height: normal;
					letter-spacing: normal;
					color: #9E9E9E;
				}

				.item-value {
					font-family: Source Han Sans;
					font-size: 18px;
					font-weight: 500;
					line-height: normal;
					letter-spacing: normal;
					color: #202020;
				}
			}
		}
	}
}
</style>